<template>
	<view class="" :style="{paddingBottom:'75px' }">
		<view>
			<u-swiper indicator-pos="bottomLeft" height="448" name="url" @click="clckSwip" :list="list"></u-swiper>
		</view>
		<view class="user p-30 b-r-30 b-f">
			<view class="topAvart f f-a-c">
				<view class="avati">
					<image :src="pet.avatar||'/static/avat.png'" class="img" mode="aspectFill"></image>
				</view>
				<view class="rightTit">
					<view class="name">
						{{pet.name||'--'}}
					</view>
					<view class="nosi f f-a-c">
						{{pet.breed||'--'}} <text>/</text>
						{{pet.gender==1?'男宝宝':pet.gender==2?'女宝宝':pet.gender==3?'未绝育':'已绝育'}}<text>/</text>{{pet.age||'--'}}岁<text>/</text>{{pet.constellation||'--'}}
					</view>
				</view>
			</view>
			<view class="xian"></view>
			<view class="botHead f f-a-c f-j-b">
				<view class="day">
					{{ pet.name||'--' }} 已陪伴我<text class="m-l-10">{{ pet.day||'--' }}</text>天
				</view>
				<view @click=" manage" class="youManage f f-a-c">
					<image src="/static/home/Frame@2x.png" class="jiantou" mode=""></image>
					管理猫猫
				</view>
			</view>
		</view>
		<view @click="goJotDown" class="JotDown f f-a-c f-j-b p-30 b-r-30 b-f">
			<view style="width: 100%;" class="f f-a-c">
				<view class="Down">
					随手记
				</view>
				<view class="Records">
					{{note_last_record_time?`最近一次记录${$u.timeFrom(+new Date(note_last_record_time), 'yyyy/mm/dd')}`:'暂无记录'}}
				</view>
			</view>
			<image src="/static/home/drawing@2x.png" class="bg" mode=""></image>
			<image src="/static/home/Frame_1@2x.png" class="jiantous" mode=""></image>
		</view>
		<!-- /下面的tab -->
		<view class="tab m-0-a f f-a-c f-j-b">
			<view v-for="(item,index) in tabsList" class="life" @click="tabClick(item,index)"
				:class="{active:index==act}">
				<image v-show="index==act" src="/static/home/6.png" class="bgB" mode=""></image>
				{{item.name}}
			</view>
		</view>
		<!-- 下面的列表 -->
		<view class="tabBody f f-a-c f-w-w">
			<view v-for="(item,index) in dataList1" :key="index" @click="weifht(item)" class="itemBody b-r-20 m-b-20">
				<view class="topName f f-a-c f-j-b">
					<view class="topLeft">
						<view class="name">
							{{item.title}}
						</view>
						<view v-if="item.time" class="jilu">
							<!-- 10天前记录 -->
							{{$u.timeFrom(+new Date(item.time), 'yyyy/mm/dd')}}
						</view>
					</view>
					<view class="nameImg">
						<image v-if="act==0" :src="item.img" class="img" mode=""></image>
						<image v-else :src="item.img" class="img1" mode=""></image>
					</view>
				</view>
				<view class="botB f f-a-c">
					<text v-if="item.title=='体重'">{{item.stat.newest_value||'--'}}kg <text
							class="text">{{item.stat.last_value>0?'+'+item.stat.last_value:item.stat.last_value||'--'}}kg</text></text>
					<text v-if="item.title=='喝水'">{{item.stat.newest_value||'--'}}ml <text
							class="text">{{item.stat.last_value>0?'+'+item.stat.last_value:item.stat.last_value||'--'}}ml</text></text>
					<view v-if="index==1||index==2" class="f f-a-c f-w-w">
						<!-- <image src="/static/home/2.png" class="imageIcon" mode=""></image>
						<image src="/static/home/2.png" class="imageIcon" mode=""></image>
						<image src="/static/home/2.png" class="imageIcon" mode=""></image>
						<image src="/static/home/2.png" class="imageIcon" mode=""></image>
						<image src="/static/home/2.png" class="imageIcon" mode=""></image> -->
						<image :src="`/static/icon/${ite}.png`" v-for="(ite,ind) in item.icons" :key="ind"
							class="imageIcon" mode="aspectFill"></image>
						<view v-if="(act==0&&item.icons.length==0&&index==1)||(act==0&&item.icons.length==0&&index==2)"
							class="">
							--
						</view>
					</view>
				</view>
			</view>
		</view>
		<view @click="ringUp" class="technicalSupport">
			技术支持：海拔网络
		</view>
		<tabBar numBer="1"></tabBar>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue';
	export default {
		components: {
			navBar,

		},
		data() {
			return {
				tabsList: [{
					name: '日常记录',

				}, {
					name: '健康记录',

				}, {
					name: '洗护记录',

				}, {
					name: '清洁记录',

				}],
				records: [],
				note_last_record_time: '',
				dataList1: [],
				heig: '',
				act: 0,
				pet: {},
				list: [{
						image: '/static/home/banner@2x.png'
					},
					{
						image: '/static/home/banner@2x.png'
					},
					{
						image: '/static/home/banner@2x.png'
					}
				],
			}
		},
		onShow() {
			let token = uni.getStorageSync('token')
			if (token.length != 0) {
				this.iniToken()
			}
			this.heig = uni.getStorageSync('ht');
			this.init()
			this.setting()
		},
		onLoad(options) {
			this.addList()
			if (options.code) {
				uni.setStorageSync('code', options.code)
			}
		},
		onShareAppMessage() {
			let id = uni.getStorageSync('userInfo').id
			return {
				title: 'Mecats 星球',
				path: '/pages/home/index?code=' + id //后面是路径上要传递的参数
			}
		},
		onShareTimeline() {},
		methods: {
			// 点击轮播图
			clckSwip(e) {
				console.log(e, '555555555');
				if (this.list[e].content) {
					uni.navigateTo({
						url: '/pages/home/bannerCount?cont=' + this.list[e].content
					})
				}
			},
			async setting() {
				let n = await this.$api.setting()
				uni.setStorageSync('food', n.data.food_unit)
				uni.setStorageSync('group_page_content', n.data.group_page_content)
				uni.setStorageSync('group_qrcode', n.data.group_qrcode)
				uni.setStorageSync('user_agree', n.data.user_agree)
				uni.setStorageSync('privacy_agree', n.data.privacy_agree)
			},
			// 获取地址
			async addList() {
				let token = uni.getStorageSync('token')
				if (token.length == 0) {
					return
				}
				let n = await this.$api.addressesList()
				let m = n.data.rows.filter(item => {
					if (item.defaulted) {
						return item
					}
				})
				if (m) {
					uni.getStorageSync('address', m[0])
				}
			},
			async iniToken() {
				let n = await this.$api.userInfo()
				uni.setStorageSync('userInfo', n.data)
				uni.setStorageSync('upload_token', n.data.upload.token)
				uni.setStorageSync('domain', n.data.upload.domain)
				uni.setStorageSync('upload_domain', n.data.upload.endpoint)
			},
			async init() {
				let n = await this.$api.home({
					id: uni.getStorageSync('homeId') || ''
				})
				this.list = n.data.banners
				this.pet = n.data.pet || {}
				uni.setStorageSync('pet', n.data.pet || '')
				if (n.data.pet) {
					uni.setStorageSync('catId', n.data.pet.id || '')
					uni.setStorageSync('homeId', n.data.pet.id || '')
				}
				this.records = n.data.records
				this.note_last_record_time = n.data.note_last_record_time || ''
				this.tabClick({}, this.act)
				this.records.forEach((item, index) => {
					if (index == 0) {
						item.img = '/static/home/icon_rcjl_01@2x.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					} else if (index == 1) {
						item.img = '/static/home/icon_rcjl_02@2x.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					} else if (index == 2) {
						item.img = '/static/home/icon_rcjl_03@2x.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					} else if (index == 3) {
						item.img = '/static/home/icon_rcjl_04@2x.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					} else if (index == 4) {
						item.img = '/static/home/11.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					} else if (index == 5) {
						item.img = '/static/home/22.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					} else if (index == 6) {
						item.img = '/static/home/33.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					} else if (index == 7) {
						item.img = '/static/home/44.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					} else if (index == 8) {
						item.img = '/static/home/55.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					} else if (index == 9) {
						item.img = '/static/home/66.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					} else if (index == 10) {
						item.img = '/static/home/77.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					} else if (index == 11) {
						item.img = '/static/home/31.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					} else if (index == 12) {
						item.img = '/static/home/32.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					} else if (index == 13) {
						item.img = '/static/home/34.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					} else if (index == 14) {
						item.img = '/static/home/35.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					} else if (index == 15) {
						item.img = '/static/home/51.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					} else if (index == 16) {
						item.img = '/static/home/52.png'
						item.icon1 = '/static/home/3.png'
						item.icon2 = '/static/home/5.png'
						item.icon3 = '/static/home/1.png'
					}
				})
			},
			// /跳转到体重
			weifht(item) {
				if (item.title == '体重') {
					uni.navigateTo({
						url: '/pageA/Weight'
					})
				} else if (item.title == '尿便') {
					uni.navigateTo({
						url: '/pageA/UrinaryStool'
					})
				} else if (item.title == '饮食') {
					uni.navigateTo({
						url: '/pageA/diet'
						// url: '/pages/home/diet'
					})
				} else if (item.title == '喝水') {
					uni.navigateTo({
						url: '/pageA/DrinkWater'
					})
				} else if (item.title == '喂保健品') {
					uni.navigateTo({
						url: '/pageA/HealthCareProduct'
					})
				} else if (item.title == '驱虫') {
					uni.navigateTo({
						url: '/pageA/ExpellingInsects'
					})
				} else if (item.title == '疫苗') {
					uni.navigateTo({
						url: '/pageA/Vaccine'
					})
				} else if (item.title == '抗体水平') {
					uni.navigateTo({
						url: '/pageA/AntibodyLevel'
					})
				} else if (item.title == '体检') {
					uni.navigateTo({
						url: '/pageA/PhysicalExamination'
					})
				} else if (item.title == '看病') {
					uni.navigateTo({
						url: '/pageA/SeeDoctor'
					})
				} else if (item.title == '给药') {
					uni.navigateTo({
						url: '/pageA/Administration'
					})
				} else if (item.title == '洗澡') {
					uni.navigateTo({
						url: '/pageA/TakeBath'
					})
				} else if (item.title == '剪指甲') {
					uni.navigateTo({
						url: '/pageA/TrimNails'
					})
				} else if (item.title == '洗耳朵') {
					uni.navigateTo({
						url: '/pageA/WashEars'
					})
				} else if (item.title == '刷牙') {
					uni.navigateTo({
						url: '/pageA/BrushTeeth'
					})
				} else if (item.title == '消毒') {
					uni.navigateTo({
						url: '/pageA/Disinfection'
					})
				} else if (item.title == '清洁') {
					uni.navigateTo({
						url: '/pageA/Clean'
					})
				}
			},
			// /拨打电话
			ringUp() {
				uni.makePhoneCall({
					phoneNumber: '13855129561', //仅为示例
					success: res => {
						console.log(res, '222222222');
					},
					fail: error => {
						console.log(error, '1111111111');
						this.$msg('调取失败')
					}
				})
			},
			// 跳到管理猫猫
			manage() {
				uni.navigateTo({
					url: '/pages/home/Management'
				})
			},
			// 跳转到随手记
			goJotDown() {
				uni.navigateTo({
					url: '/pages/home/JotDown'
				})
			},
			tabClick(item, index) {
				this.act = index
				if (index == 0) {
					this.dataList1 = [this.records[0], this.records[1], this.records[2], this.records[3]]
				} else if (index == 1) {
					this.dataList1 = [this.records[4], this.records[5], this.records[6], this.records[7], this.records[8],
						this.records[9], this.records[10]
					]
				} else if (index == 2) {
					this.dataList1 = [this.records[11], this.records[12], this.records[13], this.records[14]]
				} else {
					this.dataList1 = [this.records[15], this.records[16]]
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.technicalSupport {
		text-align: center;
		color: #b7b2b2;
		margin: 30rpx 0;
	}

	// @function pxfn($px) {
	// 	@return calc($px / 4.75) * 1vw;
	// }


	/deep/ .u-swiper-indicator {
		padding: 0 50rpx !important;
	}

	.tabBody {
		width: 90%;
		margin: 0 auto;
		margin-top: 35rpx;

		.botB {
			font-size: 32rpx;
			font-family: HarmonyOS Sans, HarmonyOS Sans-700;
			font-weight: 700;
			text-align: LEFT;
			color: $hei;
			// margin-top: 5rpx;

			.imageIcon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
				margin-bottom: 5rpx;
			}

			.text {
				font-size: 24rpx;
				font-family: HarmonyOS Sans, HarmonyOS Sans-700;
				font-weight: 700;
				text-align: LEFT;
				color: $brown;
				margin-left: 15rpx;
			}
		}

		.topName {
			.topLeft {
				.name {
					font-size: 32rpx;
					// font-family: PingFang SC, PingFang SC-600;
					font-weight: 600;
					text-align: LEFT;
					color: $hei;
					margin-bottom: 15rpx;
				}

				.jilu {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					color: $hui;
				}
			}

			.nameImg {
				.img {
					width: 144rpx;
					height: 120rpx;
				}

				.img1 {
					width: 96rpx;
					height: 96rpx;
				}
			}
		}

		.itemBody {
			width: 49%;
			margin-right: 2%;
			background: #fffefc;
			padding: 20rpx;
			box-shadow: 0rpx 12rpx 64rpx 0rpx rgba(151, 121, 97, 0.07);

			&:nth-child(2n) {
				margin-right: 0;
			}
		}
	}

	.tab {
		width: 90%;
		margin-top: 60rpx;

		.life {
			position: relative;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 500;
			text-align: CENTER;
			color: $hui;

			.bgB {
				position: absolute;
				width: 60rpx;
				height: 52rpx;
				top: -10rpx;
				left: -10rpx;
			}
		}

		.active {
			font-size: 36rpx;
			font-weight: 600;
			text-align: CENTER;
			color: $hei;
		}
	}

	// .tab {

	// 	font-family: 'HarmonyOS Sans Bold';

	// 	.one {
	// 		// font-family: 'HarmonyOS Sans Bold';
	// 		// font-family: 'HarmonyOS Sans Medium';
	// 		// font-family: 'MyFont_Medium';
	// 	}

	// 	.tow {
	// 		// font-family: 'HarmonyOS Sans';
	// 	}
	// }

	/deep/ .u-swiper-indicator {
		bottom: 70rpx !important;
	}

	.JotDown {
		position: relative;
		width: 90%;
		margin: 0 auto;
		margin-top: 25rpx;


		.Down {
			font-size: 36rpx;
			width: 20%;
			font-weight: 600;
			text-align: LEFT;
			color: $hei;
			margin-right: 20rpx;
		}

		.Records {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			color: $hui;
			margin-right: 26rpx;
		}

		.bg {
			position: absolute;
			width: 186rpx;
			height: 92rpx;
			right: 100rpx;
			top: 25rpx;
			margin-top: -20rpx;
			margin-right: 10rpx;
		}

		.jiantous {
			width: 44rpx;
			height: 40rpx;
		}
	}

	.user {
		width: 90%;
		margin: 0 auto;
		margin-top: -38rpx;
		position: relative;
		z-index: 2;

		.botHead {
			.day {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hui;

				text {
					color: #977961;
				}
			}

			.youManage {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: $brown;

				.jiantou {
					width: 28rpx;
					height: 28rpx;
					margin-right: 15rpx;
				}
			}
		}

		.xian {
			height: 0;
			width: 100%;
			border-bottom: 2rpx dashed #f1eeeb;
			margin: 30rpx 0;
		}

		.rightTit {
			.name {
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: $hei;
				margin-bottom: 10rpx;
			}

			.nosi {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hui;

				text {
					color: #f1eeeb;
					margin: 0 15rpx;
				}
			}
		}

		.avati {
			width: 96rpx;
			height: 96rpx;
			border-radius: 48rpx;
			overflow: hidden;
			margin-right: 24rpx;

			.img {
				width: 96rpx;
				height: 96rpx;
			}
		}
	}
</style>